<template>
  <div class="app-container" v-if="state">
    <el-header>
      <div>题目总数：{{ paperData.questionList.length }}</div>
      <el-row>
        <el-col :span="6">
          <div>考试时长：{{ paperData.duration }}分钟</div>
        </el-col>
        <el-col :span="6">
          <div>剩余时长：
            {{ duration }}
          </div>
        </el-col>
      </el-row>
    </el-header>
<!--    <el-header>-->
<!--      <el-row>-->
<!--        <span v-for="(item, index) in paperData.questionList" :key="index">-->
<!--            &lt;!&ndash;  el-tag&#45;&#45;success el-tag&#45;&#45;info  &ndash;&gt;-->
<!--            <span class="el-tag el-tag&#45;&#45;info el-tag&#45;&#45;large el-tag&#45;&#45;light do-exam-title-tag"><span-->
<!--              class="el-tag__content"> {{ index + 1 }} </span>&lt;!&ndash;v-if&ndash;&gt;</span>-->

<!--        </span>-->
<!--      </el-row>-->
<!--    </el-header>-->

    <el-header>
      <el-row><span v-for="(item, index) in paperData.questionList" :key="index">
        <span
        class="el-tag el-tag--large el-tag--light do-exam-title-tag"
        :class="{'el-tag--success': isChecked(index),'el-tag--info': !isChecked(index),'active-tag': index === currentIndex }"
        @click="switchQuestion(index)" style="cursor: pointer; margin-right: 5px;">        <span
        class="el-tag__content">{{ index + 1 }}</span>      </span>    </span></el-row>
    </el-header>


    <el-main>
      <el-footer>
        <el-button @click="subtract">上一题</el-button>
        <el-button @click="add">下一题</el-button>
        <el-button @click="submit" :loading="isSubmit">提交</el-button>
      </el-footer>
      <span v-for="(item, index) in paperData.questionList" :key="item.id">
        <div v-show="index == currentIndex">
          <!-- 单选题 -->
          <div v-show="item.questionsType == 'select'">
            <div>
              <p>单选题</p>
              <p>{{ index + 1 }}.{{ item.title }}：</p>
            </div>
            <div>
              <el-radio-group
                v-model="selectRadio"
                style="display: flex; flex-direction: column"
              >
                <el-radio
                  v-for="(option, optionIndex) in item.optionList"
                  :key="optionIndex"
                  :label="option.serialNumber"
                >{{ option.serialNumber }}:{{
                    option.optionContent
                  }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <!-- 多选题 -->
          <div v-show="item.questionsType == 'selects'">
            <div>
              <p>多选题</p>
              <p>{{ index + 1 }}.{{ item.title }}：</p>
            </div>
            <div>
              <el-checkbox-group
                v-model="selectsRadioList"
                style="display: flex; flex-direction: column"
              >
                <el-checkbox
                  v-for="(option, optionIndex) in item.optionList"
                  :key="optionIndex"
                  :label="option.serialNumber"
                >{{ option.serialNumber }}:{{
                    option.optionContent
                  }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <!-- 问答题 -->
            <div v-show="item.questionsType == 'answer'">
            <div>
              <p>问答题</p>
              <p>{{ index + 1 }}.{{ item.title }}：</p>
            </div>
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="answers">
</el-input>


            </div>
          </div>
          <!-- 判断题 -->
        </div>
      </span>
    </el-main>

    <el-dialog
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      :visible.sync="centerDialogVisible"
      width="50%"
      center>
      <span>需要注意的是内容是默认不居中的</span>
      <div style="height:600px">
        <el-row>
          <el-col :span="24">
            <h1>得分：{{ userTotalPoint }}</h1>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="userAnswerDetail">查看详情</el-button>
    <el-button type="primary" @click="$tab.closePage(); ">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {paperQuestionList, addUserAnswer, getUserAnswer} from "@/api/exam/examination";

export default {
  name: "Examination",
  data() {
    return {
      isSubmit: false,
      answers: "",
      state: false,
      currentIndex: 0, //当前题目
      selectRadio: [], //单选题的选项
      selectsRadioList: [], //多选题的选项
      paperData: {}, //试卷数据
      checkQuestionList: [1], //当前已做的题目
      paperId: null,//试卷id
      taskId: null,//任务id
      duration: null,//考试时长倒计时
      startTime: null,//开始时间
      endTime: null, //结束时间
      centerDialogVisible: false,
      userTotalPoint: null,
      userAnswerId: null
    };
  },
  created() {
    this.getRouterData();
  },
  methods: {
    switchQuestion(index) {
      // 储存当前题目的答案
      let question = this.paperData.questionList[this.currentIndex];
      if (question.questionsType == "selects") {
        question.selectsRadioList = this.selectsRadioList;
      } else if (question.questionsType == "select") {
        question.selectRadio = this.selectRadio;
      } else if (question.questionsType == "answer") {
        question.answers = this.answers;
      }

      // 加载目标题目的答案
      let target = this.paperData.questionList[index];
      if (target.questionsType == "selects") {
        this.selectsRadioList = target.selectsRadioList || [];
      } else if (target.questionsType == "select") {
        this.selectRadio = target.selectRadio || null;
      } else if (target.questionsType == "answer") {
        this.answers = target.answers || "";
      }

      // 切换当前题目索引
      this.currentIndex = index;
    },
    isChecked(index) {
      const question = this.paperData.questionList[index];
      console.log('question=',question)
      if (question.questionsType === "select") {
        return question.selectRadio !== undefined && question.selectRadio !== null&&question.selectRadio != "";
      } else if (question.questionsType === "selects") {
        return question.selectsRadioList !== undefined && question.selectsRadioList.length > 0;
      } else if (question.questionsType === "answer") {
        return question.answers !== undefined && question.answers !== "";
      }
      return false;
    },
    userAnswerDetail() {
      this.$tab.openPage("答题详情", "/exam/userPaper/" + this.userAnswerId);
    },
    //倒计时
    countDown() {
      setInterval(() => {
        let time = Date.parse(new Date())
        if (this.endTime > time) {
          //正常执行
          let obj = this.getTimeNumber(this.endTime - time)
          this.duration = obj.hour + ":" + obj.minutes + ":" + obj.seconds
        }
      }, 1000)
    },
    //提交试卷
    submit() {
      this.isSubmit = true;
      addUserAnswer(this.submitDataInit()).then((res) => {
        // console.log(res.data)
        this.userAnswerId = res.data
        this.centerDialogVisible = true
        this.isSubmit = false;
        //this.getUser(res.data)
        //  if(res.data == this.paperData.questionList){
        //    this.$modal.msgSuccess("提交成功");
        //  }else {
        //    this.$modal.msgError("提交失败");
        //  }
      });
    },
    //提交前的数据初始化
    submitDataInit() {
      //用于修复提交的时候 当前页面数据未加载进来的bug
      let question = this.paperData.questionList[this.currentIndex];
      if (question.questionsType == "selects") {
        question.selectsRadioList = this.selectsRadioList;
      } else if (question.questionsType == "select") {
        question.selectRadio = this.selectRadio;
      } else if (question.questionsType == "answer") {
        question.answers = this.answers;
      }
      //整理数据
      let ary = this.paperData.questionList.map((item) => {
        if (item.questionsType == "select") {
          if (item.selectRadio != null) {
            item.isCorrect =
              item.selectRadio === item.selectAnswer ? true : false;
          } else {
            item.isCorrect = false;
          }
        } else if (item.questionsType == "selects") {
          if (item.selectsRadioList != null) {
            //先对答案做排序处理
            let str = item.selectAnswer.split(",").sort().toString();
            //判断答案是否正确
            item.isCorrect =
              item.selectsRadioList.sort().toString() === str ? true : false;
          } else {
            item.isCorrect = false;
          }
        } else if (item.questionsType == "answer") {
          if (item.selectsRadioList != null) {
            //判断答案是否正确
            item.isCorrect =
              item.answer === item.answers ? true : false;
          } else {
            item.isCorrect = false;
          }
        }
        return item;
      });

      //统计分值
      let score = ary.map(obj => {
        if (obj.isCorrect) {
          return parseInt(obj.score)
        } else {
          return 0
        }
      }).reduce((pre, cur) => pre + cur)

      //设置数据
      let param = {
        examinationPaperId: parseInt(this.paperId),
        startTime: this.startTime,
        endTime: new Date(),
        totalPoints: score,
        taskId: parseInt(this.taskId),
        optionList: [],
      }
      param.optionList = ary.map(item => {
        let obj = {
          examinationPaperQuestionsId: item.id,
          questionsType: item.questionsType,
          questionsAnswer: item.selectAnswer,
          isCorrect: item.isCorrect,
        }
        if (item.questionsType == "select") {
          obj.userAnswer = item.selectRadio
        } else if (item.questionsType == "selects") {
          obj.userAnswer = item.selectsRadioList != null ? item.selectsRadioList.sort().toString() : ""
        } else if (item.questionsType == "answer") {
          obj.userAnswer = item.answers != null ? item.answers : ""
          obj.questionsAnswer = item.answer
        }
        return obj
      })
      //console.log(ary,score,this.paperData,param)
      this.userTotalPoint = param.totalPoints
      return param
    },
    //上一题
    subtract() {
      if (this.currentIndex > 0) {
        //储存上一题的选中值
        let question = this.paperData.questionList[this.currentIndex];
        let up = this.paperData.questionList[this.currentIndex - 1];
        //获取当前题目，记性答案的储存更新
        if (question.questionsType == "selects") {
          question.selectsRadioList = this.selectsRadioList;
        } else if (question.questionsType == "select") {
          question.selectRadio = this.selectRadio;
        } else if (question.questionsType == "answer") {
          question.answers = this.answers;
        }
        //获取上一道题 进行答案的渲染
        if (up.questionsType == "selects") {
          this.selectsRadioList =
            up.selectsRadioList == undefined ? [] : up.selectsRadioList;
        } else if (up.questionsType == "select") {
          this.selectRadio =
            up.selectRadio == undefined ? null : up.selectRadio;
        } else if (question.questionsType == "answer") {
          this.answers =
            up.answers == undefined ? null : up.answers;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex - 1;
      }
    },
    //下一题的按钮
    add() {
      if (this.currentIndex < this.paperData.questionList.length - 1) {
        //储存当前题目的值 更新答案
        let question = this.paperData.questionList[this.currentIndex];
        let down = this.paperData.questionList[this.currentIndex + 1];
        if (question.questionsType == "selects") {
          question.selectsRadioList = this.selectsRadioList;
        } else if (question.questionsType == "select") {
          question.selectRadio = this.selectRadio;
        } else if (question.questionsType == "answer") {
          question.answers = this.answers;
        }
        //获取下一道题目的答案，进行渲染
        if (down.questionsType == "selects") {
          this.selectsRadioList =
            down.selectsRadioList == undefined ? [] : down.selectsRadioList;
        } else if (down.questionsType == "select") {
          this.selectRadio =
            down.selectRadio == undefined ? null : down.selectRadio;
        } else if (question.questionsType == "answer") {
          this.answers =
            down.answers == undefined ? null : down.answers;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex + 1;
      }
    },
    //切换题目的按钮
    checkoutChange(data) {
      data.target.checked = true;
    },
    //获取初始化的数据
    getRouterData() {
      this.taskId = this.$route.params.taskId
      this.paperId = this.$route.params.paperId;
      paperQuestionList({paperId: this.$route.params.paperId}).then((res) => {
        this.paperData = res.data;
        this.state = true;
        this.startTime = new Date()
        this.startDate = Date.parse(new Date())
        this.endTime = this.startDate + 60 * res.data.duration * 1000;//加考试时长的时间戳 考试时长单位为分钟
        //var dataDefPar = new Date(parseInt(this.endTime));//转换为时间
        //console.log(dataDefPar.getFullYear() + '-' + (dataDefPar.getMonth() + 1) + '-' + (dataDefPar.getDate())+" "+dataDefPar.getHours()+":"+dataDefPar.getMinutes()+":"+dataDefPar.getSeconds())
        this.countDown()
      });
    },
    // 计算时间
    getTimeNumber(number) {
      var hour = Math.floor(number / 3600 / 1000), //小时
        minutes = Math.floor((number - hour * 3600) / 60 / 1000),
        seconds = Math.floor(number - (hour * 3600 + minutes * 60) * 1000) / 1000;
      return {
        hour: hour,
        minutes: minutes,
        seconds: seconds
      }
    }
  },
};
</script>
<style>
.el-radio {
  margin-top: 15px;
}

.el-checkbox {
  margin-top: 15px;
}

.active-tag {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.do-exam-title-tag {
  transition: all 0.3s ease;
}
</style>
